<template>
  <div>
    <div class="title">
      <span class="titleContent">{{ title }}</span>
    </div>
    <div
      class="active-users card"
      style="width: 100%; height: 330px"
      ref="container"
    ></div>
  </div>
</template>
<script setup>
import { onBeforeUnmount, onMounted, ref, onActivated, onDeactivated } from "vue"
import * as echarts from "echarts"

let chart = null

const container = ref(null)
const props = defineProps(["title"])
const initChart = () => {
  if (chart == null) {
    chart = echarts.init(container.value)
  }
  chart.setOption({
    tooltip: {
      formatter: function (params) {
        var result = ""
        var dotaDta
        if (params.value > 0) {
          dotaDta =
            '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#1E90FF"></span>'
        } else {
          dotaDta =
            '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#3d82fd"></span>'
        }

        // var dotaDta2 =
        //   '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:rgba(250, 104, 7)"></span>'

        result += `<span style="">${dotaDta}${params.name}:${params.value}(万元)</span>`

        //   "</br>" +
        //   dotaDta +
        //   "高倍病例数量:" +
        //   params[0].data +
        //   "</br>" +
        //   dotaDta2 +
        //   "占医疗总费用比例:" +
        //   params[1].data +
        //   "%"
        return result
      },
    },
    legend: {
      data: ["超支科室(万元)", "结余科室(万元)"],
      x: "right",
    },
    // grid: {
    //   left: "3%",
    //   right: "4%",
    //   bottom: "3%",
    //   containLabel: true,
    // },
    xAxis: [
      {
        type: "value",
      },
    ],
    yAxis: [
      {
        show: false,
        type: "category",
        data: ["肿瘤内科", "骨科一组", "老年医学科", "普外科", "呼吸内科"],
        axisTick: {
          show: false,
        },
        inverse: false,
      },
      {
        inverse: false,
        show: false,
        type: "category",
        data: ["消化内科", "内分泌科", "儿科", "眼科", "骨科二组"],
        axisTick: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: "超支科室(万元)",
        type: "bar",
        stack: "Total",
        barWidth: "30%",
        label: {
          show: true,
          position: "left", // 显示在右边
          formatter: "{b}", // 显示类别名
        },
        itemStyle: {
          emphasis: { barBorderRadius: 10 },
          normal: {
            barBorderRadius: 10,
            color: "#3d82fd",
          },
        },
        yAxisIndex: 0,
        data: [-10.47, -10.89, -20.9, -28.9, -44.85],
      },
      {
        name: "结余科室(万元)",
        type: "bar",
        stack: "Total",
        label: {
          show: true,
          position: "right",
          formatter: "{b}",
        },
        barWidth: "30%",
        itemStyle: {
          emphasis: { barBorderRadius: 10 },
          normal: {
            barBorderRadius: 10,
            color: "#04b5fa",
          },
        },
        yAxisIndex: 1,
        data: [2.11, 3.22, 4.73, 5.63, 13.45],
      },
    ],
  })
  window.addEventListener("resize", resize)
}

onMounted(() => {
  initChart()
  
})
</script>
<style scoped>
.title {
  position: relative;
  padding-left: 10px;
  margin-bottom: 20px;
}
.title::before {
  background: #108ee9;
  height: 100%;
  width: 5px;
  content: "";
  position: absolute;
  left: 0;
}
.titleContent {
  font-size: 14px;
  font-weight: 900;
}
</style>
